<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="转出人员" prop="goToPerson">
        <person-select v-model="form.goToPerson" placeholder="请选择转出人员"></person-select>
      </el-form-item>
      <el-form-item v-if="form.type!=null" label="转至单位" prop="goToUnits">
        <el-input v-if="form.type==0" v-model="form.goToUnits" type="textarea" placeholder="请输入内容"/>
        <treeselect v-if="form.type==1" v-model="form.goToUnits" :options="deptOptions" :show-count="true"
                    placeholder="请选择转至单位"/>
      </el-form-item>
      <el-form-item label="转出类型" prop="transmittingType">
        <el-radio-group v-model="form.type">
          <el-radio
              v-for="dict in transferOutTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
          >{{ dict.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="转出时间" prop="goToDate">
        <el-date-picker clearable size="small" style="width: 100%"
                        v-model="form.goToDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择转出时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="转出原因" prop="goToCause">
        <el-input v-model="form.goToCause" type="textarea" placeholder="请输入转出原因"/>
      </el-form-item>
      <el-form-item label="经办人" prop="attn">
        <user-select v-model="form.attn" placeholder="请输入经办人" :max-show="1"></user-select>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item label="附件" prop="attachments">
        <file-upload v-model="form.attachments" :isShowTip="false" :maxShow="1"></file-upload>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify ref="verifyRef" :taskId="taskId" @submitCallback="submitCallback"
            :taskVariables="taskVariables" :sendMessage="sendMessage"></verify>
    <!-- 工作流结束 -->
  </div>
</template>
<script>
import {getTransferOut} from "@/api/business/TransferOut";
import PersonSelect from "@/components/PersonSelect/index.vue";
import UserSelect from "@/components/UserSelect/index.vue";
import verify from "@/components/Process/Verify.vue";
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "transferOut",
  dicts: [],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String // 任务id
  },
  created() {
    this.getDicts("transfer_out_type").then(response => {
      this.transferOutTypeOptions = response.data;
    });
    this.getTreeselect();
  },
  components: {
    Treeselect, verify, UserSelect, PersonSelect
  },
  data() {
    return {
      // 流程实例
      processInstanceId: '',
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 档案转出表格数据
      TransferOutList: [],
      transferOutTypeOptions: [],
      deptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goToPerson: undefined,
        attn: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        goToUnits: [
          {required: true, message: "转至单位不能为空", trigger: "blur"}
        ],
        goToDate: [
          {required: true, message: "转出时间不能为空", trigger: "blur"}
        ],
        goToCause: [
          {required: true, message: "转出原因不能为空", trigger: "blur"}
        ],
        goToPerson: [
          {required: true, message: "转出人员不能为空", trigger: "blur"}
        ],
        attn: [
          {required: true, message: "经办人不能为空", trigger: "blur"}
        ],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {}
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById()
        }
      }
    }
  },
  methods: {
    submitCallback() {
      this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getTransferOut(this.businessKey)
      this.form = data;
    },
    getTreeselect() {
      treeselect({"params[ignorePermission]": 'true'}).then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      getTransferOut(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userId: 1
        };
        this.sendMessage = {
          title: '档案导出申请',
          messageContent: '单据【' + this.form.id + "】申请"
        }
      });
      this.$refs.verifyRef.visible = true
      this.$refs.verifyRef.reset()
    }
  }
};
</script>
<style scoped>

</style>
